import {ActionType, ProColumns, ProTable} from "@ant-design/pro-components";
import {message, Popconfirm} from "antd";
import React from "react";
import {addRegion, deleteRegion, pageRegion, updateRegionById} from "@/pages/system/region/api";
import RegionEditModel from "@/pages/system/region/components/RegionEditModel";

const RegionManager: React.FC = () => {
  const actionRef = React.useRef<ActionType>();

  const columns: ProColumns<any>[] = [
    {
      title: '省份',
      dataIndex: 'province',
      ellipsis: true,
      key: 'province',
    },
    {
      title: '省份编码',
      dataIndex: 'provinceCode',
      ellipsis: true,
      key: 'provinceCode',
      hideInSearch: true,
    },
    {
      title: '城市',
      dataIndex: 'city',
      ellipsis: true,
      key: 'city',
    },
    {
      title: '城市编码',
      dataIndex: 'cityCode',
      ellipsis: true,
      key: 'cityCode',
      hideInSearch: true,
    },
    {
      title: '区县',
      dataIndex: 'district',
      ellipsis: true,
      key: 'district',
    },
    {
      title: '区县编码',
      dataIndex: 'districtCode',
      ellipsis: true,
      key: 'districtCode',
      hideInSearch: true,
    },
    {
      title: '拼音简码',
      dataIndex: 'abbr',
      ellipsis: true,
      key: 'abbr',
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 200,
      render: (text, record: API.IRegion, _, action) => [
        <RegionEditModel
          isAdd={false}
          region={record} key={`update${record.id}`}
          triggerButton={
            <a key="editable">编辑</a>
          }
          onSubmit={async (values: API.IRegion) => {
            values.id = record.id
            const {data} = await updateRegionById(values)
            if (data) {
              actionRef.current?.reload()
              message.success('修改成功')
            }
            return data
          }}
        />,
        <Popconfirm
          key="delete"
          title={`确认删除`}
          description={`确认删除【${record.district}】区县吗？`}
          okText="确认"
          cancelText="取消"
          onConfirm={async () => {
            const {data} = await deleteRegion(record.id)
            if (data) {
              actionRef.current?.reload()
              message.success('删除成功')
            }
          }}
        >
          <a target="_blank" rel="noopener noreferrer" key="delete">删除</a>
        </Popconfirm>,
      ],
    },
  ]

  return (
    <ProTable<API.IRegion, API.PageParams>
      headerTitle={"行政区域管理"}
      actionRef={actionRef}
      rowKey="key"
      search={{
        labelWidth: "auto",
      }}
      size={"small"}
      toolBarRender={() => [
        <RegionEditModel
          isAdd={true}
          key={`add`}
          onSubmit={async (values: API.IRegion) => {
            const {data} = await addRegion(values)
            if (data) {
              actionRef.current?.reload()
              message.success('添加成功')
            }
            return data
          }}
        />
      ]}
      pagination={{
        pageSize: 10,
      } as any}
      request={async (params, sort, filter) => {
        const {data} = await pageRegion(params)
        return data
      }}
      columns={columns}
    />
  )
};

export default RegionManager;
